React useLayoutEffect: Sinchroninis DOM matavimas ir atnaujinimai

„React“ siūlo galingus kabliukus (hooks) šalutiniams efektams jūsų komponentuose valdyti. Nors useEffect yra pagrindinis įrankis daugumai asinchroninių šalutinių efektų, useLayoutEffect įsikiša, kai reikia atlikti sinchroninius DOM matavimus ir atnaujinimus. Šiame vadove išsamiai nagrinėjamas useLayoutEffect, paaiškinama jo paskirtis, naudojimo atvejai ir kaip jį efektyviai naudoti.

Sinchroninių DOM atnaujinimų poreikio supratimas

Prieš gilinantis į useLayoutEffect specifiką, svarbu suprasti, kodėl kartais reikalingi sinchroniniai DOM atnaujinimai. Naršyklės atvaizdavimo procesas susideda iš kelių etapų, įskaitant:

• HTML analizė: HTML dokumento pavertimas DOM medžiu.
• Atvaizdavimas: Kiekvieno elemento stilių ir išdėstymo apskaičiavimas DOM medyje.
• Piešimas: Elementų atvaizdavimas ekrane.

„React“ useEffect kabliukas veikia asinchroniškai po to, kai naršyklė nupiešia ekraną. Tai paprastai yra pageidautina dėl našumo, nes tai neblokuoja pagrindinės gijos ir leidžia naršyklei išlikti interaktyviai. Tačiau yra situacijų, kai reikia išmatuoti DOM prieš naršyklei piešiant ir tada atnaujinti DOM remiantis šiais matavimais prieš vartotojui pamatant pradinį atvaizdavimą. Pavyzdžiai:

• Iššokančio patarimo (tooltip) pozicijos koregavimas atsižvelgiant į jo turinio dydį ir turimą ekrano plotą.
• Elemento aukščio apskaičiavimas, siekiant užtikrinti, kad jis tilptų į konteinerį.
• Elementų pozicijos sinchronizavimas slenkant arba keičiant dydį.

Jei šioms operacijoms naudosite useEffect, galite pastebėti vizualų mirgėjimą, nes naršyklė nupiešia pradinę būseną prieš useEffect paleidimą ir DOM atnaujinimą. Būtent čia ir praverčia useLayoutEffect.

Pristatome useLayoutEffect

useLayoutEffect yra „React“ kabliukas, panašus į useEffect, tačiau jis veikia sinchroniškai po to, kai naršyklė atliko visas DOM mutacijas, bet prieš nupiešdama ekraną. Tai leidžia jums nuskaityti DOM matavimus ir atnaujinti DOM nesukeliant vizualaus mirgėjimo. Štai pagrindinė sintaksė:

import { useLayoutEffect } from 'react';

function MyComponent() {
  useLayoutEffect(() => {
    // Kodas, vykdomas po DOM mutacijų, bet prieš piešimą

    // Pasirinktinai grąžinama valymo funkcija
    return () => {
      // Kodas, vykdomas, kai komponentas atjungiamas arba perpiešiamas
    };
  }, [dependencies]);

  return (
    

      {/* Komponento turinys */}
    
  );
}

Kaip ir useEffect, useLayoutEffect priima du argumentus:

1. Funkciją, kurioje yra šalutinio efekto logika.
2. Pasirinktinį priklausomybių masyvą. Efektas bus paleistas iš naujo tik pasikeitus vienai iš priklausomybių. Jei priklausomybių masyvas tuščias ([]), efektas bus paleistas tik vieną kartą, po pirminio atvaizdavimo. Jei priklausomybių masyvas nenurodytas, efektas bus paleistas po kiekvieno atvaizdavimo.

Kada naudoti useLayoutEffect

Svarbiausia suprasti, kada naudoti useLayoutEffect, yra atpažinti situacijas, kai reikia atlikti DOM matavimus ir atnaujinimus sinchroniškai, prieš naršyklei piešiant. Štai keletas dažniausių naudojimo atvejų:

1. Elementų matmenų matavimas

Jums gali prireikti išmatuoti elemento plotį, aukštį ar poziciją, kad apskaičiuotumėte kitų elementų išdėstymą. Pavyzdžiui, galite naudoti useLayoutEffect, kad užtikrintumėte, jog iššokantis patarimas visada būtų pozicionuojamas matomoje srityje.

import React, { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {
  const [isVisible, setIsVisible] = useState(false);
  const tooltipRef = useRef(null);
  const buttonRef = useRef(null);

  useLayoutEffect(() => {
    if (isVisible && tooltipRef.current && buttonRef.current) {
      const buttonRect = buttonRef.current.getBoundingClientRect();
      const tooltipWidth = tooltipRef.current.offsetWidth;
      const windowWidth = window.innerWidth;

      // Apskaičiuojama ideali patarimo pozicija
      let left = buttonRect.left + (buttonRect.width / 2) - (tooltipWidth / 2);

      // Koreguojama pozicija, jei patarimas išeitų už peržiūros srities ribų
      if (left < 0) {
        left = 10; // Minimali paraštė nuo kairiojo krašto
      } else if (left + tooltipWidth > windowWidth) {
        left = windowWidth - tooltipWidth - 10; // Minimali paraštė nuo dešiniojo krašto
      }

      tooltipRef.current.style.left = `${left}px`;
      tooltipRef.current.style.top = `${buttonRect.bottom + 5}px`;
    }
  }, [isVisible]);

  return (
    

       setIsVisible(!isVisible)}>Toggle Tooltip
      {isVisible && (
        

          Tai yra patarimo žinutė.
        
      )}
    
  );
}

Šiame pavyzdyje useLayoutEffect naudojamas apskaičiuoti patarimo poziciją remiantis mygtuko pozicija ir peržiūros srities matmenimis. Tai užtikrina, kad patarimas visada būtų matomas ir neišeitų už ekrano ribų. getBoundingClientRect metodas naudojamas gauti mygtuko matmenis ir poziciją atsižvelgiant į peržiūros sritį.

2. Elementų pozicijų sinchronizavimas

Jums gali prireikti sinchronizuoti vieno elemento poziciją su kitu, pavyzdžiui, lipnią antraštę, kuri seka vartotoją slenkant puslapį. Vėlgi, useLayoutEffect gali užtikrinti, kad elementai būtų tinkamai išlygiuoti prieš naršyklei piešiant, išvengiant bet kokių vizualinių trūkumų.

import React, { useState, useRef, useLayoutEffect } from 'react';

function StickyHeader() {
  const [isSticky, setIsSticky] = useState(false);
  const headerRef = useRef(null);
  const placeholderRef = useRef(null);

  useLayoutEffect(() => {
    const handleScroll = () => {
      if (headerRef.current && placeholderRef.current) {
        const headerHeight = headerRef.current.offsetHeight;
        const headerTop = headerRef.current.offsetTop;
        const scrollPosition = window.pageYOffset;

        if (scrollPosition > headerTop) {
          setIsSticky(true);
          placeholderRef.current.style.height = `${headerHeight}px`;
        } else {
          setIsSticky(false);
          placeholderRef.current.style.height = '0px';
        }
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    

      

      

        
Lipni antraštė
      
      
{/* Turinys, kurį galima slinkti */}
    
  );
}

Šis pavyzdys parodo, kaip sukurti lipnią antraštę, kuri išlieka peržiūros srities viršuje, kai vartotojas slenka. useLayoutEffect naudojamas apskaičiuoti antraštės aukštį ir nustatyti vietos rezervavimo elemento aukštį, kad turinys nešokinėtų, kai antraštė tampa lipni. offsetTop savybė naudojama nustatyti pradinę antraštės poziciją dokumento atžvilgiu.

3. Teksto šuolių prevencija įkeliant šriftus

Kai įkeliami interneto šriftai, naršyklės iš pradžių gali rodyti atsarginius šriftus, dėl ko tekstas persiskirsto, kai įkeliami pasirinktiniai šriftai. useLayoutEffect galima naudoti apskaičiuoti teksto aukštį su atsarginiu šriftu ir nustatyti minimalų konteinerio aukštį, taip išvengiant šuolio.

import React, { useRef, useLayoutEffect, useState } from 'react';

function FontLoadingComponent() {
  const textRef = useRef(null);
  const [minHeight, setMinHeight] = useState(0);

  useLayoutEffect(() => {
    if (textRef.current) {
      // Išmatuojamas aukštis su atsarginiu šriftu
      const height = textRef.current.offsetHeight;
      setMinHeight(height);
    }
  }, []);

  return (
    

      
Tai yra tekstas, kuris naudoja pasirinktinį šriftą.
    
  );
}

Šiame pavyzdyje useLayoutEffect išmatuoja pastraipos elemento aukštį naudojant atsarginį šriftą. Tada jis nustato pagrindinio div elemento minHeight stiliaus savybę, kad tekstas nešokinėtų, kai įkeliamas pasirinktinis šriftas. Pakeiskite „MyCustomFont“ tikruoju savo pasirinktinio šrifto pavadinimu.

useLayoutEffect ir useEffect: Pagrindiniai skirtumai

Svarbiausias skirtumas tarp useLayoutEffect ir useEffect yra jų vykdymo laikas:

• useLayoutEffect: Veikia sinchroniškai po DOM mutacijų, bet prieš naršyklei piešiant. Tai blokuoja naršyklės piešimą, kol efektas baigs vykdymą.
• useEffect: Veikia asinchroniškai po to, kai naršyklė nupiešia ekraną. Tai neblokuoja naršyklės piešimo.

Kadangi useLayoutEffect blokuoja naršyklės piešimą, jį reikėtų naudoti saikingai. Per didelis useLayoutEffect naudojimas gali sukelti našumo problemų, ypač jei efektas apima sudėtingus ar daug laiko reikalaujančius skaičiavimus.

Štai lentelė, apibendrinanti pagrindinius skirtumus:

Savybė	useLayoutEffect	useEffect
Vykdymo laikas	Sinchroninis (prieš piešimą)	Asinchroninis (po piešimo)
Blokavimas	Blokuoja naršyklės piešimą	Nėra blokuojantis
Naudojimo atvejai	DOM matavimai ir atnaujinimai, reikalaujantys sinchroninio vykdymo	Dauguma kitų šalutinių efektų (API iškvietimai, laikmačiai ir kt.)
Poveikis našumui	Potencialiai didesnis (dėl blokavimo)	Mažesnis

Geriausios praktikos naudojant useLayoutEffect

Norėdami efektyviai naudoti useLayoutEffect ir išvengti našumo problemų, laikykitės šių geriausių praktikų:

1. Naudokite saikingai

Naudokite useLayoutEffect tik tada, kai absoliučiai būtina atlikti sinchroninius DOM matavimus ir atnaujinimus. Daugumai kitų šalutinių efektų geresnis pasirinkimas yra useEffect.

2. Efekto funkcija turi būti trumpa ir efektyvi

Efekto funkcija useLayoutEffect turėtų būti kuo trumpesnė ir efektyvesnė, kad būtų sumažintas blokavimo laikas. Venkite sudėtingų skaičiavimų ar daug laiko reikalaujančių operacijų efekto funkcijoje.

3. Išmintingai naudokite priklausomybes

Visada nurodykite priklausomybių masyvą useLayoutEffect. Tai užtikrina, kad efektas bus paleistas iš naujo tik tada, kai tai būtina. Atidžiai apsvarstykite, kurie kintamieji turėtų būti įtraukti į priklausomybių masyvą. Nereikalingų priklausomybių įtraukimas gali sukelti nereikalingus perpiešimus ir našumo problemas.

4. Venkite begalinių ciklų

Būkite atsargūs, kad nesukurtumėte begalinių ciklų atnaujindami būsenos kintamąjį useLayoutEffect viduje, kuris taip pat yra efekto priklausomybė. Tai gali sukelti nuolatinį efekto paleidimą ir naršyklės užstrigimą. Jei reikia atnaujinti būsenos kintamąjį remiantis DOM matavimais, apsvarstykite galimybę naudoti ref, kad išsaugotumėte išmatuotą vertę ir palygintumėte ją su ankstesne verte prieš atnaujindami būseną.

5. Apsvarstykite alternatyvas

Prieš naudodami useLayoutEffect, apsvarstykite, ar nėra alternatyvių sprendimų, kuriems nereikia sinchroninių DOM atnaujinimų. Pavyzdžiui, galbūt galite naudoti CSS, kad pasiektumėte norimą išdėstymą be JavaScript įsikišimo. CSS perėjimai ir animacijos taip pat gali suteikti sklandžius vizualinius efektus be useLayoutEffect poreikio.

useLayoutEffect ir serverio pusės atvaizdavimas (SSR)

useLayoutEffect priklauso nuo naršyklės DOM, todėl jis sukels įspėjimą, kai bus naudojamas serverio pusės atvaizdavimo (SSR) metu. Taip yra todėl, kad serveryje nėra DOM. Norėdami išvengti šio įspėjimo, galite naudoti sąlyginį patikrinimą, kad užtikrintumėte, jog useLayoutEffect veiktų tik kliento pusėje.

import React, { useLayoutEffect, useEffect, useState } from 'react';

function MyComponent() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  useLayoutEffect(() => {
    if (isClient) {
      // Kodas, priklausantis nuo DOM
      console.log('useLayoutEffect veikia kliento pusėje');
    }
  }, [isClient]);

  return (
    

      {/* Komponento turinys */}
    
  );
}

Šiame pavyzdyje useEffect kabliukas naudojamas nustatyti isClient būsenos kintamąjį į true po to, kai komponentas yra prijungtas kliento pusėje. useLayoutEffect kabliukas tada veikia tik tuo atveju, jei isClient yra true, taip išvengiant jo vykdymo serveryje.

Kitas būdas – naudoti pasirinktinį kabliuką, kuris SSR metu grįžta prie useEffect:

import { useLayoutEffect, useEffect } from 'react';

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

export default useIsomorphicLayoutEffect;

Tada galite naudoti useIsomorphicLayoutEffect vietoj tiesioginio useLayoutEffect ar useEffect naudojimo. Šis pasirinktinis kabliukas patikrina, ar kodas veikia naršyklės aplinkoje (t. y., typeof window !== 'undefined'). Jei taip, jis naudoja useLayoutEffect; kitu atveju, jis naudoja useEffect. Tokiu būdu išvengsite įspėjimo SSR metu, tuo pačiu išnaudodami sinchroninį useLayoutEffect elgesį kliento pusėje.

Globalūs aspektai ir pavyzdžiai

Naudodami useLayoutEffect programose, skirtose pasaulinei auditorijai, atsižvelkite į šiuos dalykus:

• Skirtingas šriftų atvaizdavimas: Šriftų atvaizdavimas gali skirtis skirtingose operacinėse sistemose ir naršyklėse. Užtikrinkite, kad jūsų išdėstymo korekcijos veiktų nuosekliai visose platformose. Apsvarstykite galimybę išbandyti savo programą įvairiuose įrenginiuose ir operacinėse sistemose, kad nustatytumėte ir išspręstumėte bet kokius neatitikimus.
• Iš dešinės į kairę (RTL) rašomos kalbos: Jei jūsų programa palaiko RTL kalbas (pvz., arabų, hebrajų), atkreipkite dėmesį, kaip DOM matavimai ir atnaujinimai veikia išdėstymą RTL režimu. Naudokite CSS logines savybes (pvz., margin-inline-start, margin-inline-end) vietoj fizinių savybių (pvz., margin-left, margin-right), kad užtikrintumėte tinkamą išdėstymo pritaikymą.
• Internacionalizacija (i18n): Teksto ilgis gali labai skirtis tarp kalbų. Koreguodami išdėstymą pagal teksto turinį, atsižvelkite į galimybę, kad skirtingose kalbose tekstas bus ilgesnis arba trumpesnis. Naudokite lanksčias išdėstymo technikas (pvz., CSS flexbox, grid), kad prisitaikytumėte prie kintančio teksto ilgio.
• Prieinamumas (a11y): Užtikrinkite, kad jūsų išdėstymo korekcijos neturėtų neigiamos įtakos prieinamumui. Suteikite alternatyvius būdus pasiekti turinį, jei JavaScript yra išjungtas arba jei vartotojas naudoja pagalbines technologijas. Naudokite ARIA atributus, kad suteiktumėte semantinę informaciją apie savo išdėstymo korekcijų struktūrą ir paskirtį.

Pavyzdys: Dinaminis turinio įkėlimas ir išdėstymo koregavimas daugiakalbiame kontekste

Įsivaizduokite naujienų svetainę, kuri dinamiškai įkelia straipsnius skirtingomis kalbomis. Kiekvieno straipsnio išdėstymas turi prisitaikyti prie turinio ilgio ir vartotojo pageidaujamų šrifto nustatymų. Štai kaip useLayoutEffect gali būti naudojamas šiame scenarijuje:

1. Išmatuokite straipsnio turinį: Po to, kai straipsnio turinys yra įkeltas ir atvaizduotas (bet dar nerodomas), naudokite useLayoutEffect, kad išmatuotumėte straipsnio konteinerio aukštį.
2. Apskaičiuokite turimą erdvę: Nustatykite turimą erdvę straipsniui ekrane, atsižvelgiant į antraštę, poraštę ir kitus UI elementus.
3. Koreguokite išdėstymą: Remdamiesi straipsnio aukščiu ir turima erdve, pakoreguokite išdėstymą, kad užtikrintumėte optimalų skaitomumą. Pavyzdžiui, galite pakoreguoti šrifto dydį, eilutės aukštį ar stulpelio plotį.
4. Taikykite kalbai būdingas korekcijas: Jei straipsnis yra kalba su ilgesniais tekstais, gali prireikti atlikti papildomas korekcijas, kad prisitaikytumėte prie padidėjusio teksto ilgio.

Naudodami useLayoutEffect šiame scenarijuje, galite užtikrinti, kad straipsnio išdėstymas būtų tinkamai pakoreguotas prieš vartotojui jį pamatant, taip išvengiant vizualinių trūkumų ir suteikiant geresnę skaitymo patirtį.

Išvada

useLayoutEffect yra galingas kabliukas, skirtas sinchroniniams DOM matavimams ir atnaujinimams „React“ programose atlikti. Tačiau jį reikėtų naudoti apgalvotai dėl galimo poveikio našumui. Suprasdami skirtumus tarp useLayoutEffect ir useEffect, laikydamiesi geriausių praktikų ir atsižvelgdami į globalias pasekmes, galite efektyviai naudoti useLayoutEffect, kad sukurtumėte sklandžias ir vizualiai patrauklias vartotojo sąsajas.

Nepamirškite teikti pirmenybę našumui ir prieinamumui, kai naudojate useLayoutEffect. Visada apsvarstykite alternatyvius sprendimus, kuriems nereikia sinchroninių DOM atnaujinimų, ir kruopščiai išbandykite savo programą įvairiuose įrenginiuose ir naršyklėse, kad užtikrintumėte nuoseklią ir malonią vartotojo patirtį savo pasaulinei auditorijai.